<template>
  <Top-Page class="vip-box">
    <cu-custom bgColor="bg-gradual-white-3" :isBack="true">
      <template #backText></template>
      <template #content>VIP</template>
    </cu-custom>

    <image class="vip-bg" src="../../static/image/vip/vip-0.jpg" mode="widthFix"></image>

    <view class="vip-centre">
      <view class="headline">
        <view class="headline-1">加入VIP会员</view>
        <view class="headline-2">成为我们的会员 享尽会员权益</view>
      </view>

      <!-- 特权 -->
      <view class="privilege-wrap">
        <view class="privilege-list">
          <view class="privilege-li" v-for="item in privilege_li">
            <view class="privilege-li-icon-wrap">
              <image class="privilege-li-icon" :src="item.img" mode="widthFix"></image>
            </view>
            <view class="privilege-li-text">
              {{ item.text }}
            </view>
          </view>
        </view>

        <view class="privilege-more">更多特权 敬请期待</view>
      </view>

      <!-- 开通 -->
      <view class="set-meal">
        <view class="meal-list">
          <view
            :class="[ind === index ? 'li-in' : '', 'meal-li']"
            v-for="(item, index) in mealList"
            @click="changeConfig(item.money, item.month, index)"
          >
            <view class="money-wrap">￥{{ item.money }}</view>
            <view class="num-wrap">
              {{ item.month < 999 ? item.month : '终身' }}
            </view>
            <view class="unit-wrap">{{ item.month < 999 ? '个月' : '' }}</view>
          </view>
        </view>

        <veiw class="submit-btn" @click="submitBtn">￥{{ money }}立即续费</veiw>
      </view>
    </view>
  </Top-Page>
</template>

<script>
export default {
  data() {
    return {
      ind: 0,
      month: 0,
      money: '',
      mealList: [
        {
          num: 1,
          money: 10
        },
        {
          num: 6,
          money: 30
        },
        {
          num: 999,
          money: 60
        }
      ],
      privilege_li: [
        {
          img: '../../static/image/vip/vip-icon-0.png',
          text: '红颜免查'
        },
        {
          img: '../../static/image/vip/vip-icon-2.png',
          text: '会员图标'
        },
        // {
        //   img: '../../static/image/vip/vip-icon-4.png',
        //   text: '商业密聊'
        // },
        {
          img: '../../static/image/vip/vip-icon-6.png',
          text: '消息屏蔽'
        },
        {
          img: '../../static/image/vip/vip-icon-8.png',
          text: '消息指定'
        },
        {
          img: '../../static/image/vip/vip-icon-10.png',
          text: '隐形收藏'
        }
      ]
    };
  },

  mounted() {
    this.firstApi();
  },
  methods: {
    firstApi() {
      this.mealList.length = 0;
      this.$api.msgApi.getMemberConfig().then((res) => {
        const { code, data, msg } = res;
        console.log(data);

        if (code == 0) {
          this.mealList.push(...data);
          this.money = data[0].money;
          this.month = data[0].month;
        }
      });
    },
    submitBtn() {
      this.$api.msgApi.getMemberreCharge(this.month).then((res) => {
        const { code, data, msg } = res;
        const baseUrl =
          process.env.NODE_ENV === 'development' ? 'https://im.xldsyjt.com' : `${location.protocol}//${location.host}`;

        const url = `${baseUrl}/common/Pub/alipay?trade_no=${data.trade_no}`;

        if (code == 0) {
          location.href = url;
          // uni.navigateTo({
          //   url: `/pages/pay/pay?url=${JSON.stringify(url)}`
          // });
        }
      });
    },
    changeConfig(money, month, index) {
      this.ind = index;
      this.money = money;
      this.month = month;
    }
  }
};
</script>

<style lang="scss" scoped>
@import './scss/vip.scss';
</style>
